<template>
  <div class="pay-vip">
  <el-button text @click="dialogVisible = true">
    开通会员
  </el-button>

  <el-dialog
      v-model="dialogVisible"
      title="开通会员"
      width="30%"
      :before-close="handleClose"
  >
    <span>这是一张图片</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handlePayVip" >支付成功</el-button>
        <el-button @click="dialogVisible = false">取消支付</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, ref} from 'vue'
import { ElMessageBox,ElMessage } from 'element-plus'
import {useStore} from "vuex";
import {HttpManager} from "@/api";



export default defineComponent({
  setup() {
    const store = useStore();
    const userId = computed(() => store.getters.userId);
    const dialogVisible = ref(false);
    let DTime = "aaa";
    const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
    async function handlePayVip(){
        try{
          const result = (await HttpManager.addVip(userId.value)) as ResponseBody;
          console.log(result.message);
          DTime=result.message;
        }catch (error) {
          console.error(error);
        }
        ElMessage(DTime)
    }
    return {
      dialogVisible,
      handleClose,
      handlePayVip

    };
  },
  });

</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
